<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <title>花坊分销佣金计算</title>
</head>
<body>
<div class="page-container" id="app" style="margin-top:10px;">
    
 <form action="#" enctype="multipart/form-data" method="post"  class="layui-form" >



<div class="layui-form-item">
    <label class="layui-form-label">设置商品类型：</label>
                <div class="check-box">
                     <button type="button" :class="ms==2?'layui-btn layui-btn-primary':'layui-btn'" @click='mss(1)'>普通商品</button>
					   <button type="button" :class="ms==1?'layui-btn layui-btn-primary':'layui-btn'" @click='mss(2)'>积分礼包</button>
					
                 </div>
        </div>
		
	

  <div class="layui-form-item"  v-show="ms == 1" >
    <label class="layui-form-label">自己可得佣金</label>
    <div class="layui-input-inline">
      <input type="text" name="tg"  placeholder="输入自己可得佣金" autocomplete="off" class="layui-input" v-model="zjyj" @input='gb()'>
    </div>
  </div>
  
    <div class="layui-form-item"  v-show="ms == 2">
    <label class="layui-form-label">选择礼包</label>
    <div class="layui-input-inline">
      <select name="interest" lay-filter="aihao">
        <option value="1" selected="">99元礼包</option>
      </select>
    </div>
   
  </div>



    <div class="layui-form-item">
    <label class="layui-form-label">自己的身份: </label>

    <div class="layui-input-inline">
		<button type="button"  :class="zjsf == index ?'layui-btn layui-btn-normal':'layui-btn layui-btn-primary'" @click='zjsf1(index)'
		 v-for="(item,index) in sflb"  :key="index" 
		>
		{{item}}
		</button>
	</div>
  </div>



 
<div class="layui-form-item">
    <label class="layui-form-label">自己身份：</label>
	<div class="layui-input-inline">
		
        我自己({{ sflb[zjsf] }})
        佣金<span style='color:#F00'> {{ zjyj1>0?zjyj1:0 }} </span> 元 </div>
               <div class="layui-input-inline">
				
<button type="button" class="layui-btn layui-btn-primary" @click='add(0)'>添加下级</button>

<button type="button" class="layui-btn layui-btn-danger" @click='delall()'>清除</button>
                 </div>
        </div>
  
  
  <div class="layui-form-item" v-for="(item,index) in xflb" >
    <label class="layui-form-label">{{index==0?'我的':''}}下级：</label>
	<div class="layui-input-inline">
        {{ item.name }}({{ sflb[item.value] }} )
        佣金<span style='color:#F00'> {{ item.yj>0?item.yj:0 }}  </span> 元 </div>
                <div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-danger" @click='del(index)'>删除</button>
<button type="button" class="layui-btn layui-btn-primary" @click='add(index+1)'>添加下级</button>
                 </div>
        </div>
		
		
		<div v-show='show'>
  <div class="layui-form-item">
    <label class="layui-form-label">添加下级：</label>
	<div class="layui-input-inline">
        <input type="tel" name="phone"  autocomplete="off" class="layui-input" placeholder="输入下级的名字" v-model="xjname"> </div>
                
        </div>
		    <div class="layui-form-item">
    <label class="layui-form-label">下级身份: </label>

    <div class="layui-form-mid layui-word-aux">
		<button type="button"  :class="xjsf == index ?'layui-btn layui-btn-xs layui-btn-normal':'layui-btn layui-btn-xs'" @click='xjsf1(index)'
		 v-for="(item,index) in sflb"  :key="index" 
		>
		{{item}}
		</button>
	</div>
  </div>
  
  
      <label class="layui-form-label">：</label>
	<div class="layui-input-inline">
       
	   <button type="button" class="layui-btn layui-btn-normal" @click='addxj()'>确认添加</button>
	   </div>
                
        </div>
		   
  
  </div>
  
  
    <div class="layui-form-item">
    <div class="layui-input-block">
	<!-- <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" @click='tj'>
	<i class="layui-icon layui-icon-release"></i>清空下级
	</button> -->
    </div>
  </div>
</form>



</div>



<!--_footer 作为公共模版分离出去-->
<script src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
<script>
 new Vue({
        el: "#app",
        data() {
            return {
			show:false,
			xjid:0,
                tga:'',
				dls:[],//代理用户
				ms:2,//这里是佣金模式
				je:99,//金额
				zjsf:0,//自己身份
				zjyj:75,//自己可得佣金
				zjyj1:0,//分佣后自己可得
				zjbl:0,//自己的比例
				xjsf:1,//下级身份
				tjbl:0,//同级的佣金比例
				xjname:'',//下级名称
				sflb:[//身份列表
					'花花董事',
					'钻石花粉',
					'白金花粉',
					'普通花粉',
					'普通会员',
				],
				sfyj:[//身份与佣金比,lbyj礼包佣金，ptyj普通佣金
					{name:'花花董事',lbyj:45,ptyj:45},
					{name:'钻石花粉',lbyj:35,ptyj:35},
					{name:'白金花粉',lbyj:30,ptyj:25},
					{name:'普通花粉',lbyj:25,ptyj:15},
					{name:'普通会员',lbyj:0,ptyj:0},
				],
				xflb:[
					{value:1,name:'A',yj:0},
					{value:1,name:'B',yj:0},
					{value:1,name:'C',yj:0},
					{value:3,name:'D',yj:0},
				]
            }
        }, 
        methods: {
		gb(){
			this.jszyj();//计算总佣金
		},
		delall(){
			this.xflb=[]
			this.jszyj();//计算总佣金
		},
			del(wz){
				console.log(wz)
				this.xflb.splice(wz, 1);
				this.jszyj();//计算总佣金
			},
			add(wz){
				//console.log(wz)
				this.xjid=wz;
				this.show=true;
			},
			mss(id){
				console.log(id);
				this.ms=id;
				this.jszyj();
			},
			jszyj(){
				//计算总佣金，判断一下
				if(this.ms==2){
					//默认是99元的礼包，je直接等于99
					this.je=99;
					this.zjyj1=this.je*this.sfyj[this.zjsf].lbyj
					this.tjbl=6;//同级比例
				}else{
					//自己可得佣金，除以自己的佣金比例，即为总佣金
					//获取自己的身份，
					let bl=this.sfyj[this.zjsf].ptyj;
					this.je=this.zjyj/bl*100
					this.zjyj1=this.je*this.sfyj[this.zjsf].ptyj
					this.tjbl=5;//同级比例
				}
				console.log('金额是'+this.je);
				this.jsyj();//计算佣金
			},
			zjsf1(value){
				if(value==4){
    				layer.msg('自己的身份不能是普通会员');
    				return;
				}
				this.zjsf=value;//自己身份
				this.jszyj();//计算总佣金
				console.log('自己身份是'+this.zjsf)
			},
			xjsf1(value){
				this.xjsf=value;//下级身份
				//this.jszyj();//计算总佣金
				console.log(this.xjsf)
			},
			addxj(){
				let a =
				{value:this.xjsf,name:this.xjname,yj:0};
	
				this.xflb.splice(this.xjid, 0, a);
				console.log(a);
				console.log(this.xjname);
				this.jszyj();//计算总佣金
				this.show=false;
				this.xjname=''
			},
				tj(){
				console.log(this.ms)
				},
			jsyj(){
				//把自己添加到最前面。
				//获取人物关系，for循环获取最底级的佣金
				let o=0;//基础佣金为零
				let b=0;//自己可得佣金
				let c=4;//用户等级
				let ty=0;//判断是否有同级佣金
				let tongji=false;
				for(var i=this.xflb.length-1;i>=0;i--){
				this.xflb[i].yj=0
					//console.log(this.xflb[i].value)
					//c=this.xflb[i].value;
					if(c==this.xflb[i].value){
					console.log(c)
					console.log(this.xflb[i].value)
					console.log(this.xflb[i].name)
					
					//判断是否为同级，
						if(tongji==true){//如果已经获取过一次同级，那么直接跳转到下一次
							continue;
						}else{
							tongji=true;
							if(this.xflb[i].value==0||this.xflb[i].value==1){
							
							console.log('进入同级')
								//如果同级，并且等级是0或者1，那么获取同级佣金,否则跳到下次循环。
								ty=1;
								//console.log(this.xflb[i].name)
								//同级佣金只获取一次，直到分配的等级提升了
								this.xflb[i].yj=(this.tjbl/100*this.je).toFixed(2);
							}else{
								continue;
							}
						}
					}else{
						
						if(c>this.xflb[i].value){
						//如果值变小了，那么同级变更
							tongji=false;
							c=this.xflb[i].value
							//如果不是同级，并且等级变小了，那么开始计算佣金
							if(this.ms==2){
									this.xflb[i].yj=(this.sfyj[this.xflb[i].value].lbyj/100*this.je-o).toFixed(2);
								}else{
									this.xflb[i].yj=(this.sfyj[this.xflb[i].value].ptyj/100*this.je-o).toFixed(2);
								}
								o+=Number(this.xflb[i].yj);
						}
						if(this.xflb[i].value>c){
							//如果当前用户的等级大于上级等级，直接跳出到下次循环
							continue;
						}
					}
					//获取用户可得佣金，自己可得佣金减去下级拿去的佣金
					//判断佣金模式，如果是0，那么获取
					
					console.log(this.xflb[i].name+'可得佣金'+this.xflb[i].yj)
					//循环结束后，同级佣金回复为0
					ty=0
				}
				//计算自己可得，先判断一下是否为同级。
				console.log(c)
				console.log(this.zjsf)
				
				if(c==this.zjsf){
				console.log(tongji)
					if(tongji){
						this.zjyj1=0
					}else{
					this.zjyj1=(this.tjbl/100*this.je).toFixed(2);
					}
					
				}else{
				console.log(tongji)
					this.zjyj1=(this.zjyj1/100-o).toFixed(2);
				}
				
			},
        }
        ,
        created() {
               //这里是加载前的函数
			   this.jszyj();
			   //this.jsyj();
        }
        
 })



    layui.use(['form','upload','layer'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
         var form = layui.form;
           //监听提交
  form.on('submit(demo1)', function(data){
	//console.log(data.field)
    return false;
  });
          
     
    });
    
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?bf02b970151cd2396c34a286097a2b82";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>